<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>光伏电站</title> 
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Static/bootstrap-3.3.0-dist/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Static/font-awesome-4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Static/simple-line-icons-master/css/simple-line-icons.css" >
    <link type="image/x-icon" rel="shortcut icon" href="__PUBLIC__/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/style/common/sidebar.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/style/common/menu.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/style/main.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/style/analysisView/analyData.css">
  </head>
  <body>
    
    <!-- 顶部菜单栏 -->
    <div id="top">
      <include file="Common/topbar" />
    </div>
    <include file="Common/tophidden" />
    <!-- 左侧菜单栏 -->
    <div id="left">
      <include file='Common/left' />
    </div>

    <div id="right">
      <div class="container-fluid no-padding" style="height: 100%">
        <!-- 主内容标题栏 -->
        <div class="col-sm-12 overview-title" >
          <div class="pull-left overview-title-font">
            <i class="fa fa-circle" style="color:#16da16; font-size: 10px;"></i>
            <span id="s_name"></span>
            <span style="cursor:pointer;color: #428bca; font-size: 13px;">[切换]</span>
            <span style="padding-left: 10px"><img src="__PUBLIC__/images/date.png">
              <span id="title-day" class="overview-title-time">日</span>
              <span id="title-month" class="overview-title-time title-time-active">月</span>
              <span id="title-year" class="overview-title-time">年</span>
              <span id="title-total" class="overview-title-time">累计</span>
            </span>
          </div>
        </div>

        <div id="main-content" class="col-sm-12 main-padding overview">
          
          <!-- 面板 -->
          <div class="row padding-left-right cp">
            <div class="col-sm-12 no-padding no-margin panel">
              
              <!-- 天气 -->
              <div class="col-sm-3 no-padding">
                <img class="img" src="__PUBLIC__/images/any.png">
                <div class="anaWea">
                  <div class="text-center" style="margin-top: 26px;">
                    <img src="__PUBLIC__/images/sun-icon.png">
                  </div>
                  <p class="text-center sunny-days">晴天数14</p>
                  <div class="clearfix">
                    <div class="pull-left" style="padding: 0px 15px;">
                      辐射总量
                      <span class="ng-binding">49.89</span>
                      <span class="unit-font">
                        kwh/m
                        <sup>2</sup>
                      </span>
                    </div>
                    <div class="pull-right sunny-time" style="padding: 0px 15px;">
                      日照小时
                      <span>105.8</span>
                      <span class="unit-font">h</span>
                    </div>
                  </div>
                </div>
                <ul class="weather-paracon">
                  <li class="weather-para">
                    <span>
                      <img src="__PUBLIC__/images/1.png">
                    </span>
                    <span class="weather">晴</span>
                    <span class="num">14</span>
                  </li>
                  <li class="weather-para">
                    <span>
                      <img src="__PUBLIC__/images/2.png">
                    </span>
                    <span class="weather">阴</span>
                    <span class="num">14</span>
                  </li>
                  <li class="weather-para">
                    <span>
                      <img src="__PUBLIC__/images/3.png">
                    </span>
                    <span class="weather">雨</span>
                    <span class="num">14</span>
                  </li>
                  <li class="weather-para">
                    <span>
                      <img src="__PUBLIC__/images/4.png">
                    </span>
                    <span class="weather">雪</span>
                    <span class="num">14</span>
                  </li>
                  <li class="weather-para">
                    <span>
                      <img src="__PUBLIC__/images/5.png">
                    </span>
                    <span class="weather">霾</span>
                    <span class="num">14</span>
                  </li>
                  <li class="weather-para">
                    <span>
                      <img src="__PUBLIC__/images/6.png">
                    </span>
                    <span class="weather">其他</span>
                    <span class="num">14</span>
                  </li>
                </ul>
              </div>

              <div class="col-sm-9 up-right">
                <div class="col-sm-12 no-padding">
                  
                  <!-- 右侧面板：PBA -->
                  <div class="col-sm-3 text-center">
                    <div class="col-sm-12 item">
                      <span class="no-padding col-sm-12">PBA</span>
                      <div id="PBA" class="col-sm-12 no-padder" style="margin-top: 20px;"></div>
                    </div>
                  </div>
                  
                  <!-- 右侧面板：PR -->
                  <div class="col-sm-3 text-center">
                    <div class="col-sm-12 item">
                      <span class="no-padding col-sm-12">PR</span>
                      <div id="PR" class="col-sm-12 no-padder" style="margin-top: 20px;"></div>
                    </div>
                  </div>

                  <!-- 右侧面板：故障损失 -->
                  <div class="col-sm-3">
                    <div class="col-sm-12 item">
                      <div class="row-sm-6 below">
                        <p class="text-center right-title">故障损失</p>
                        <p class="right-font no-margin">故障率</p>
                        <p class="right-num red no-margin">0</p>
                      </div>
                      <div class="row-sm-6">
                        <p class="right-font no-margin">损失电量</p>
                        <p class="right-num red no-margin" style="padding-bottom: 20px;">0度</p>
                        <div class="rows">
                          <div class="col-sm-6 text-left no-padding">MTTR -h</div>
                          <div class="col-sm-6 text-right no-padding">MTBF -h</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 右侧面板：发电情况 -->
                  <div class="col-sm-3">
                    <div class="col-sm-12 item">
                      <div class="row-sm-6 below">
                        <p class="text-center right-title">发电情况</p>
                        <p class="right-font no-margin">发电量</p>
                        <p class="right-num green no-margin">43.34万度</p>
                      </div>
                      <div class="row-sm-6">
                        <p class="right-font no-margin">发电小时数</p>
                        <p class="right-num green no-margin" style="padding-bottom: 20px;">43.3h</p>
                        <div class="rows">
                          <div class="col-sm-6 text-left no-padding">总装机容量</div>
                          <div class="col-sm-6 text-right no-padding">10MW</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="below"></div>

          <!-- 图表 -->
          <div class="row row-xs" style="height: 60%">
            <div class="col-sm-12 panel no-margin" style=" min-height: 450px; height: 100%;">
              <div id="powerEfficId" style="padding: 15px; height: 100%">
                <div id="kwhChart" style="height: 100%">
                  <span style="font-size: 14px;">发电量分析</span>
                  <span class="pull-right">
                    <span class="m-r-xs">
                      <i class="fa fa-circle m-r-xs" style="color:#fe9700"></i>
                      发电量
                    </span>
                    <span class="m-r-xs">
                      <i class="fa fa-circle m-r-xs" style="color:#feb64c"></i>
                      功率
                    </span>
                    <button id="kwhChartBtn" class="btn btn-sm btn-info">数据表格</button>
                  </span>
                  <div id="kwhTotalMReport" style="width: 100%;min-height:440px;height: 100%"></div>
                </div>
                <div id="kwhTable" class="hidden">
                  <span style="font-size: 14px;">发电量分析</span>
                  <span class="pull-right">
                    <button id="kwhTableBtn" class="btn btn-sm btn-info">数据图表</button>
                  </span>
                  <table class="table table-striped b-light">
                    <thead>
                      <tr>
                        <th class="text-center">日期</th>
                        <th class="text-center">发电量(kwh)</th>
                        <th class="text-center">功率(W)</th>
                        <th class="text-center">月累计发电量(kwh)</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="text-center">2017-02-01</td>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                      </tr>
                      <tr>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                      </tr>
                      <tr>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                      </tr>
                      <tr>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                      </tr>
                      <tr>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                        <td class="text-center">4487</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            
          </div>
        </div>

      </div>
    </div>
    <script src="__PUBLIC__/Static/Jquery/jquery.min.js"></script>
    <script src="__PUBLIC__/Static/bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>
    <script src="__PUBLIC__/script/station/sidebar.js"></script>
    <script src="__PUBLIC__/Static/echarts/dist/echarts.js"></script>
    <script type="text/javascript">
      //日期
      var days = [];
      //发电量
      var power = [];

      //月计划完成率
      var energy = [];
      $.ajax({
        type: "POST",
        url: "power_energy_month",
        data: "",
        async:false,
        success:function(data){
            //console.log(data);
            var count = 0;
            for (var i in data[0]) {
              power[count++] = data[0][i];
              //energy[count++] = data[1][i];
            }
            count = 0;
            for (var i in data[1]) {
              //power[count++] = data[1][i];
              energy[count++] = data[1][i];
            }
        }
      });
      //console.log(energy);
      days = ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22'];
      var kwhTotalMReport = echarts.init(document.getElementById('kwhTotalMReport'));


      var option = {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line',// 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
               color: '#c3c3c3',
            }
          }
        },
        grid: {
          left: 100,
          right: 100,
          botton: 0,
        },
        xAxis: [{
          type: 'category',
          data: days,
          axisLine: {
            lineStyle: {
              color: '#C2C2C2'
            }
          },
          axisTick: [{
              show: 'false',
              alignWithLabel: 'true'
          }]
        }],
        yAxis: [
          {
            type: 'value',
            name: 'kWh',
            min: '0',
            axisLine: {
              lineStyle: {
                color: '#C2C2C2'
              }
            },
            axisTick: [{
              show: 'false',
              alignWithLabel: 'true'
            }],
            splitLine: [{
              show: 'false',
            }],
          },
          {
            type: 'value',
            name: 'W',
            min: '0',
            axisLine: {
              lineStyle: {
                color: '#C2C2C2'
              }
            },
            axisTick: [{
              show: 'false',
              alignWithLabel: 'true'
            }],
            splitLine: [{
              show: 'false',
            }],
          },
        ],
        series: [
          {
              name: '发电量',
              type: 'bar',
              barWidth: '15px',
              data: power,
              symbol: 'none',
              itemStyle:{  
                normal:{color:'#fe9700'},
                //emphasis:{color:'#feb64c'}  
              }  
          },
          {
              name: '功率',
              type: 'bar',
              barWidth: '15px',
              barGap: '0',
              yAxisIndex: 1,
              symbol: 'none',
              data: energy,
              itemStyle:{  
                normal:{color:'#feb64c'},  
              }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      kwhTotalMReport.setOption(option);

      setTimeout(function (){
        window.onresize = function () {
            kwhTotalMReport.resize();
        }
      },200)
    </script>
    <script src="__PUBLIC__/script/analysisView/radialIndicator.js"></script>
    <script type="text/javascript">
      //进度条
      $('#PBA').radialIndicator({
        barColor: '#87CEEB',
        barWidth: 10,
        initValue: 40,
        percentage: true,
        radius:65,
        barColor:'#52b4fb',
        barBgColor:'#CCCCCC',
        fontSize: 25
      });
      $('#PR').radialIndicator({
        barColor: '#87CEEB',
        barWidth: 10,
        initValue: 80,
        percentage: true,
        radius:65,
        barColor:'#52b4fb',
        barBgColor:'#CCCCCC',
        fontSize: 25
      });

      //图表切换
      $("#kwhTableBtn").click(function() {
        $("#kwhTable").addClass('hidden');
        $("#kwhChart").removeClass("hidden");
      });
      $("#kwhChartBtn").click(function() {
        $("#kwhTable").removeClass('hidden');
        $("#kwhChart").addClass("hidden");
      });
    </script>
    <script src="__PUBLIC__/script/station/header_public.js"></script>
      
  </body>

</html>
